<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_引出</title>
</head>

<body>
    <div id="app">
        <my-cpn v-show="isShow"></my-cpn>
    </div>
</body>
<script src="../vue.js"></script>
<template id="myCpn">
    <!-- 
        实际上 h3 能展示,说明isShow使用的是 Vue 实例中的属性,而不是子组件的属性.
        这实际上就牵扯到一个概念:编译作用域
        父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译;
        而当在 my-cpn 里使用 isShow 属性时,整个组件的使用过程是相当于在父组件中出现的,那么他的作用域就是父组件,使用的属性也是父组件的属性;
        因此,isShow使用的是 Vue 实例中的属性,而不是子组件的属性.
    -->
    <h3>我能展示吗?</h3>
</template>
<script>
    Vue.component('my-cpn', {
        template: '#myCpn',
        data() {
            return {
                isShow: false
            }
        }
    })

    const vm = new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    })
</script>

</html>